<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>注册页</title>
		<!-- 设置360浏览器渲染引擎 -->
		<meta name="renderer" content="webkit">
		<link rel="icon" type="image/png" th:href="@{img/favicon.png}">
		<link rel="stylesheet" type="text/css" th:href="@{amazeui/css/amazeui.css}" />
		<script type="text/javascript" charset="utf-8" th:src="@{js/jquery.js}"></script>
		<script type="text/javascript" charset="utf-8" th:src="@{amazeui/js/amazeui.js}"></script>
		<!-- 全局CSS -->
		<link rel="stylesheet" th:href="@{css/base.css}">
		<!-- 当前页面 css -->
		<link rel="stylesheet" type="text/css" th:href="@{css/register.css}"/>
		<!-- 当前页面功能 js -->
		<script th:src="@{js/pages/register.js}"></script>
		<script>
			$(function () {


			    $('#showCode').on('click',function () {
                    var phone = $('#phone').val();
			        if(null!=phone){
					$.ajax({
                        url:'/user/userserver/sendMsg',
                        dataType:'json',
                        type: 'post',
						data:{
                          phone:phone
						},
						success:function (result) {
                            var code = result.obj;
							if(result.success==true ){
                                $('#phoneCode').on('blur',function () {
                                    var phoneCode=$('#phoneCode').val()
							    if(code!=phoneCode){
                                    $('#code-input').text("验证码错误");
								}
                                    $('#phoneCode').on('focus',function () {
                                        $('#code-input').text('')
                                    });
                                })
							}

                        }
					})
					}else {
			            alert("手机号不能为空")
					}
                })
			    var flag=true;
			    $('#phone').on('blur',function () {
                    var phone = $('#phone').val();
                    var reg = /^1(3|4|5|7|8)\d{9}$/;
					if(!reg.test(phone)){
                        $('#phone-msg').text('格式错误请重新输入');
                        flag=false;
                        $('#phone').on('focus',function () {
                            $('#phone-msg').text('')
                        });
					}
                })

			    $('#rePassword').on('blur',function () {
                    var password = $('#password').val();
                    var rePassword = $('#rePassword').val();
                    if(password!=rePassword){
                        $('#password-input').text('两次密码输入不一致');
                        flag=false;
                        $('#rePassword').on('focus',function () {
                         $('#password-input').text('')
                        });
                    }
                });

	if(flag==true){
		$('#myButton').on('click',function () {
		    var password = $('#password').val();

           $.ajax({
                url:'/user/userserver/addUser',
                dataType:'json',
                data:{
                    password:password,
                    phone:$('#phone').val(),
                    phoneCode:$('#phoneCode').val()
                },
                type: 'post',
                success:function (result) {
					if(result.success==false){
                        $('#code-input').text("验证码错误");
                        return;
					}
                }

            })

        })
	}


            })
		</script>

	</head>
	<body>
		<!-- nav-start -->
		<header>
			<div class="base-nav">
				<ul class="am-g am-g-fixed">
					<li class="am-u-sm-6">
						<img class="nav-img" th:src="@{img/logo.png}">
					</li>
					<li class="am-u-sm-2">
						<div>√</div>
						<span>正版好图书</span>
					</li>
					<li class="am-u-sm-2">
						<div>邮</div>
						<span>全场满69包邮</span>
					</li>
					<li class="am-u-sm-2">
						<div>折</div>
						<span>特价书一折起</span>
					</li>
				</ul>
			</div>
			
		</header>
		<!-- nav-end -->

		<!-- register-start -->
		<div class="am-g am-g-fixed reg-body">
			<div class="reg-title am-g">
				<h2 class="am-u-sm-2">新用户注册</h2>
				<span class="am-u-sm-3">已有账号?<a href="#">请登录</a></span>
			</div>
			<div class="reg-content">
				<form class="am-form am-form-horizontal" action="">
					<div class="am-form-group">
					    <label for="phone" class="am-u-sm-2 am-form-label">手机号码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="email" id="phone" placeholder="请输入您的常用手机号码">
							<span  id="phone-msg"></span>
					    </div>
					</div>

					<div class="am-form-group">
					    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">设置密码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="password" id="password" placeholder="请输入密码">
							<span  id="password-input"></span>
					    </div>
					</div>

					<div class="am-form-group">
					    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">确认密码:</label>
					    <div class="am-u-sm-5  am-u-end">
					        <input type="password" id="rePassword" placeholder="请再次输入密码">
					    </div>
					</div>

					<div class="am-form-group">
					    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">验证码:</label>
					    <div class="am-u-sm-3  am-u-end">
					        <input type="password" id="code" placeholder="请输入右图验证码">
					        <p class="code"></p>
					        <p class="change"><a href="javascript:void(0)" onclick="change()">换一换</a></p>
					    </div>
					</div>

					<div class="am-form-group phone-code">
					    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">手机验证码:</label>
					    <div class="am-u-sm-3  am-u-end">
					        <input type="password" id="phoneCode" placeholder="请输入验证码">
							<span  id="code-input"></span>
						</div>
						<div class="am-u-sm-2  am-u-end">
							<div class="get-code">
								<a id="showCode">获取验证码</a>
							</div>
						</div>
					</div>

					<div  class="am-form-group">
						<div class="am-u-sm-5  am-u-end">
						 	<button type="button" id="myButton" class="am-btn am-btn-block">立即注册</button>
						</div>
						
					</div>

				</form>
			</div>
			 
		</div>
		<!-- register-end -->
		<!-- foot start -->	
		<div class="base-shop-foot">
			<p>© 2018 南京网博优壹 by 项目组-chw <br>2018年03月21日23:20:50</p>
		</div>
		<!-- foot end -->
	</body>
</html>